<template>
	<view class="container">
		<div class="tabs">
			<div class="tab" :class="item.id===orderCateSelectId?'tab_active':''" v-for="item in orderCates"
				:key="item.id" @click="selectOrderCate(item.id)">
				{{item.name}}
			</div>
		</div>
		<div class="list">
			<div class="title">
				<text>---- {{orderCates.find(item=>item.id===orderCateSelectId).name}} ----</text>
				<div class="button">
					<uni-badge text="1" style="position: absolute;top: -20rpx;right: -5rpx;"></uni-badge>
					<image src="/static/icons/购物车.png" style="width: 70rpx;height: 70rpx;"></image>
				</div>
			</div>
			<div class="menus">
				<div class="menu" v-for="item in orderMenuList" :key="item.id">
					<div class="left">
						<image :src="item.image" style="width: 100%;height: 100%;"></image>
					</div>
					<div class="right">
						<div class="menu_title">标题</div>
						<div class="message">已点11</div>
						<div class="tool">
							<image src="/static/icons/加号.png" style="width:50rpx;height: 50rpx;"></image>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- // 底部菜单 -->
		<div class="bottom_tools">
			<div class="cateMessage tool">分类管理</div>
			<div class="goodMessage tool" >菜品管理</div>
		</div>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		orderCates,
		orderCateSelectId,
		orderMenuList,
		selectOrderCate
	} from './hooks.js'
</script>

<style lang="scss">
	.container {

		font-size: 14px;
		line-height: 24px;
		height: 100vh;
		display: flex;
		justify-content: start;
		align-items: center;

		.tabs {
			width: 150rpx;
			height: 100%;
			// background-color: #fff;
			border: 1px solid #fff;
			border-bottom: 1px;

			.tab {
				width: 100%;
				text-align: center;
				height: 100rpx;
				font-size: 30rpx;
				line-height: 100rpx;
			}

			.tab_active {
				color: red;
				background-color: #fff;
			}
		}

		.list {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			padding: 20rpx;

			.title {
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				position: relative;


				.button {
					position: absolute;
					right: 0px;
					top: 0px;
					// color: #fff;
					// background-color: #f44336cc;
					// padding: 0 40rpx;
					// border-radius: 10rpx;

				}
			}

			.menus {
				box-sizing: border-box;

				.menu {
					box-sizing: border-box;
					display: flex;
					justify-content: start;
					align-items: center;
					margin: 10rpx 0;
					background-color: #fff;

					.left {
						width: 200rpx !important;
						height: 150rpx !important;
						background: red;
					}

					.right {
						box-sizing: border-box;
						width: 100%;
						margin-left: 20rpx;
						height: 150rpx;

						.menu_title {
							font-size: 40rpx;
							font-weight: 550;
						}

						.message {
							font-size: 30rpx;
							color: #333;
						}

						.tool {
							box-sizing: border-box;
							width: 100%;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							padding: 10rpx;
						}
					}
				}
			}
		}
	
		.bottom_tools {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			position: absolute;
			bottom: 0;
			.tool {
				width: 50%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: #fff;
				font-size: 30rpx;
				
			}
			.cateMessage {
				background-color: #F44336;
			}
			.goodMessage {
				background-color: #00BCD4;
			}
		}
	}
</style>